<template>
	<view class="mainpage">
		<view class="up-image">
			<view class="center-text">
				<view class="first"><text>当前积分</text></view>
				<view class="center-intext">
					<text>{{integer || 10}}</text>
				</view>
				<view class="first"><text>积分可以当钱花!</text></view>
				<view class="integer-button">
					<view class="income-button" :class="!choose ? '' : 'incomes-button'" @click="getchoose(1)">
						<text>积分收入</text>
					</view>
					<view class="income-button" :class="choose ? '' : 'incomes-button'" @click="getchoose(2)">
						<text>积分支出</text>
					</view>
				</view>
			</view>

		</view>
		<view class="a">
			<view class="up-page">
				<block v-for= "(item,index) in incomelist" :key="index">
					<view class="up-page-first">
						<view class="up-page-second">
							<view class="up-page-thired">
								<view class="up-page-thired1"><text>{{item.tradeSource}}</text></view>
								<view class="up-page-thired2"><text>{{item.createTime}}</text></view>
							</view>
							<view class="up-page-four">
								<view :class="choose? 'up-page-four3' :'up-page-four1'">
									<text v-if="!choose">+{{item.tradeAmount}}</text>
									<text v-if="choose">-{{item.tradeAmount}}</text>
								</view>
								<view class="up-page-four-cochain" 
								:class="item.blockState=='' || item.blockState== 1? 'up-page-four-cochain-gray' : '' " 
								@click="getproof(item)">
								<text>
									{{item.blockState=='' || item.blockState==1 ? '交易中' : '上链凭证'}}</text>
								</view>
							</view>
						</view>
					</view>
				</block>	
				<view class="nodata" v-if="incomelist.length == 0"><text>暂无数据</text></view>
			</view>
		</view>
		<view class="foot" :class="incomelist.length > 5 ? '' : 'foot-fixed'">
			<footLogo></footLogo>
		</view>
			
	</view>
</template>

<script>
	import footLogo from "@/components/foot-logo/footLogo.vue"
	export default {
		components: {
			footLogo,

		},
		data() {
			return {
				integer: "",
				incomelist: [],
				choose: false,
				conchain:false,
				proof:"上链凭证"
			}
		},
		onLoad: function(options) {
			console.log("options", options)
			this.integer = this.pub.getUserInfo().integral
			// this.integer=options.integer;
			this.getchoose(1);
		},
		onShow: function() {
			//#ifdef H5
			document.title = '积分明细'
			//#endif
		},
		methods: {
			getproof: function(value) {
				if(value.blockState=='' || value.blockState==1){
					return;
				}
				uni.navigateTo({
					url: '/pages/my/cochain?blockCode=' + value.blockCode + "&data1=" + value.data1,
					animationType: 'pop-in',
					animationDuration: 200
				})
			},
			getchoose: function(type) {
				this.choose = type == 1 ? false : true
				this.getList()
			},
			getList: function() {
				this.incomelist = []
				var params = {
					memberId: this.pub.getUserInfo().memberId
				}
				var url = this.choose ? this.$path.INTEGER_EXPENSE : this.$path.INTEGER_INCOME
				this.$postApi(url, params).then(res => {
					console.log("积分收入数据------------——>", res.data);
					if (res.data.success) {
						let list = res.data.data.list;
						this.incomelist = list;

						console.log("this.incomelist-------------->", this.incomelist);
					} else {
						this.incomelist = []
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.mainpage {
		font-size: 34upx;
		padding: 0;
		margin: 0;
		background-color: #f7f7f7;
		min-height: 100%;
	}

	.up-image {
		width: 100%;
		height: 363upx;
		background: url(../../static/img/mine/integral-detail.jpg) no-repeat;
		background-size: 100% 100%;
		padding: 0 24upx;

		.center-text {
			height: 363upx;
			display: flex;
			flex-direction: column;
			padding: 20upx 0 0 0;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			position: relative;
		}

		.first {
			padding: 0 0 0 57upx;
		}

		.center-intext {

			font-size: 60upx;
			font-family: HYCuHeiJ;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			margin: 18upx 0 18upx 48upx;

		}

		.integer-button {

			width: 100%;
			display: flex;
			position: absolute;
			bottom: 0upx;
			z-index: 100;

			.income-button {

				width: 351upx;
				height: 100upx;
				display: flex;
				justify-content: center;
				background: rgba(255, 255, 255, 1);
				align-items: center;
				border-radius: 10upx 10upx 0 0;

			}

			.income-button text {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: bold;
				color:rgba(255,94,4,1);
			}

			.incomes-button {
				border-radius: 10upx 10upx 0 0;
				background: rgba(249, 249, 249, 1);
				height: 90upx;
				margin-top: 10upx;
			}
			.incomes-button text{
				color: rgba(102, 102, 102, 1);
			}
			// .incomes-button{
			// 	border-radius:0 10upx 0 0;
			// 	background:rgba(249,249,249,1);
			// 	height:90upx;

			// }
			// .incomess-button{
			// 	margin-top:24upx;
			// 	height:90upx;
			// 	background:rgba(249,249,249,1);
			// 	border-radius:10upx 0 0 0;
			// }

		}
	},
	.a{
		padding: 0 24upx;
		margin-bottom: 40upx;
	}
	.up-page {
		padding: 0 24upx;
		background: rgba(255, 255, 255, 1);
		position: relative;

		.up-page-first {
			width: 100%;
			height: 147upx;
			border-bottom: 1upx solid rgba(237,237,237,1);
		}
		.up-page-first:last-child{
			border-bottom: 0 !important;
		}
		.up-page-second {
			padding: 35upx 0upx 29upx 0upx;
			display: flex;
			justify-content: space-between;
		}

		.up-page-thired1 {
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
			margin-bottom: 10upx;
		}

		.up-page-thired2 {
			margin-top: 10upx;
			font-size: 22upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
		}

		.up-page-four {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.up-page-four1 {
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(255, 94, 4, 1);
		}
			
		.up-page-four-cochain {
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(255, 94, 4, 1);
			border: 1upx solid rgba(255, 94, 4, 1);
			border-radius: 22upx;
			width: 149upx;
			height: 44upx;
			display: flex;
			justify-content: center;
			margin-left: 36upx;
		}
		.up-page-four-cochain-gray{
			color:#666666;
			border: 1upx solid #555555;
			background: #C2C2C2;
		}
		.up-page-four3{
			font-size:28upx;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(128,128,128,1);
		}
	}

	.nodata {
		height: 300upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.foot{
		width: 100%;
	}
	.foot-fixed{
		position: fixed;
		bottom: 0;
	}
</style>
